
<center>
	<fieldset>
		<legend> Image Management </legend>
		<div id="vueApp">



		
			<div id="tableCanv">
					<v-table
							is-horizontal-resize
							style="width:80%"
							:columns="columns"
							:table-data="tableData"
							row-hover-color="#eee"
							row-click-color="#edf7ff"
							:cell-edit-done="cellEditDone"
					></v-table>
			</div>

			<div id="imageCanv">
					<el-upload
					class="upload-demo"
					:limit="20"
					action="/file-upload"
					:http-request="uploadSectionFile"
					:on-preview="handlePreview"
					:on-remove="handleRemove"
					:before-remove="beforeRemove"
					multiple
					:show-file-list="false"
					:on-exceed="handleExceed"
					:file-list="fileList">
						<el-button slot="trigger"  size="small" type="primary">点击上传</el-button>
						<el-button size="small" type="primary" @click="createNewPage" >新建文档</el-button>
						<el-button size="small" type="primary" @click="exportWorld" >导出world</el-button>
						<el-button size="small" type="primary" @click="createNewLine" >增加行</el-button>

						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
					</el-upload>
				
				
				<canvas id = "can"></canvas><br>
				<img src = "" id="img1" /><br>

				<div class='inner' id='inner' style="width:600px">
					
						<div v-for="item in imageList" :key="item" style=" float:left">
							<img :src="item" width="290px;height:400px"/> 
							
						</div>

					


				</div>
			</div>	
		</div>
	</fieldset>
</center>


<script src="/javascripts/jQuery-1.7.1.js"></script>

<link rel="stylesheet" href="/libs/element-ui-2.4.8/theme-chalk/index.css">


<!-- 引入Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/vue-easytable/umd/js/index.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/vue-easytable/umd/css/index.css">
<script src="/libs/element-ui-2.4.8/index.js"></script>

<script>



	new Vue({
		el:"#vueApp",
		data() {
			return {
				currentDocumentId:"feddgddedfss",
				fileList: [],
				imageList:[],
				tableData: [
                        {"title":"","content":"",},
                        {"title":"","content":"",},
                        {"title":"","content":"",},
                        {"title":"","content":"",},
                        {"title":"","content":"",}
                     ],
                columns:  [
                         {field: 'title', title:'标题', width: 180, titleAlign: 'center',columnAlign:'center',isEdit:true,
                          formatter: function (rowData,rowIndex,pagingIndex,field) {

                               return `<span class='cell-edit-color'>${rowData[field]}</span>`;
                           },isResize:true},
                         {field: 'content', title: '内容', width: 350, titleAlign: 'center',columnAlign:'center',isEdit:true,isResize:true},
                            
                ]
			};
		},
		methods: {
			uploadSectionFile:function (param) {
                //file就是当前添加的文件
                var fileObj = param.file;
                // FormData 对象
                var form = new FormData();
                // 文件对象,key是后台接受的参数名称
                form.append("uploadFile", fileObj);
				if (!window.FileReader){
					console.error("浏览器不支持 window.FileReader")
					return;
				} 
				
				var reader = new FileReader();
				const currentViewObj=this
				reader.onload = (function(theFile) {
						console.log(theFile)
					    return function(e) {
						// img 元素
						
						//删除字符串前的提示信息 "data:image/png;base64,"  
						const imageBase64=e.target.result
						var b64 = imageBase64.substring( 22 );  
						// document.getElementById('img1').src = e.target.result;
						$.ajax({
								type: 'POST',
								url: '/file-upload',
								data: {
									imgData: b64,
									file_name: theFile.name,
									pageId:currentViewObj.currentDocumentId
								}
								
							}).done(function( filename ) {
								// currentViewObj.fileList.push({
								// 	name:theFile.name,
								// 	url:data
								// })
								console.log(filename)
								currentViewObj.imageList.push(encodeURI(encodeURI("/download/"+filename)))
								//document.getElementById('img1').src=data
							});
					    };
					})(fileObj);
				
				reader.readAsDataURL(fileObj);
            },
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePreview(file) {
				console.log(file);
			},
			handleExceed(files, fileList) {
				this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
			},
			beforeRemove(file, fileList) {
				return this.$confirm(`确定移除 ${ file.name }？`);
			}

			,updateImage(){
				const objThis=this
				$.ajax({
					type: 'GET',
					url: '/get_files'
				}).done(function( data ) {
					objThis.imageList=[];
					$.each(data, function(n, v) {
						objThis.push("/download/"+v)
						
					});
				});	
			},
			exportWorld(){
				console.log("ajaxDownloadSynchronized");
				var url = "http://localhost:8081/export";
				var fileName = "testAjaxDownload.txt";
				var form = $("<form></form>").attr("action", url).attr("method", "POST");
				
				
				var tableData=JSON.stringify(this.tableData)
			
				form.append($("<input></input>").attr("type", "hidden").attr("name", "tableData").attr("value", tableData));
				form.append($("<input></input>").attr("type", "hidden").attr("name", "pageId").attr("value", this.currentDocumentId));	
				form.appendTo('body').submit().remove();
					
			},
			createNewPage(){
				const thisObject=this;
				for(var i=0;i<this.tableData.length;i++){
					var itemData=this.tableData[i];
					for(var key in itemData){
						itemData[key]="";
					}
				}
				$.ajax({
					type: 'GET',
					url: '/create-new-page'
				}).done(function( response ) {
					console.log(response)
					if(response && response.code==0){
						thisObject.currentDocumentId=response.pageId;
					}else{
						alert("创建新文档失败")
					}
					
					
				});	
			},
			// 单元格编辑回调
			cellEditDone(newValue,oldValue,rowIndex,rowData,field){

				this.tableData[rowIndex][field] = newValue;

				// 接下来处理你的业务逻辑，数据持久化等...
			},
			createNewLine(){
				this.tableData.push({name:"",content:""})
			}
		}
	})





</script>


<style>
		.cell-edit-color{
			color:#2db7f5;
			font-weight: bold;
		}
		.v-table-header-inner{
			width:1000px;
		}
</style>

